<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/toubu_dibu_gudingdingwei.css"/>
		<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	</head>
	
	<body>
		
		<!-- 头部开始 -->
		<div class="top">
			<div class="content ">

				<!-- 不管怎样，浮动完了必须清浮动  否则高度他塌陷  死记硬背，没有为什么-->	
				<!-- 左浮动 -->
				<div class="fl">
					<img src="../images/logo.png" alt="">
					<ul>
						<li><a href="index.html">课程</a></li>
						<li><a href="zixun.html">资讯</a></li>
						<li><a href="teacher.html">讲师</a></li>
						<li><a href="tiku.html">题库</a></li>
						<li><a href="wenda.html">问答</a></li>
						<div class="cl"></div>
					</ul>
				</div>
				
				<!-- 右浮动 -->
				<div class="fr">
					<a href="denglu.html">sherley</a>
				</div>
				
				<!-- 清浮动 -->
				<div class="cl">
					
				</div> 
			</div>
		</div>
		<!-- 头部结束 -->
		
		<!-- 轮播图开始 -->
		<div class="lunbo">
			<div class="swiper-container swiper-test">
				<div class="swiper-wrapper">
					<div class="swiper-slide q2">
						<img class="img1" src="../images/slider-10.png" alt="">
					    <img class="img2" src="../images/rb.png" >
						
						<div class="p">某课网全新上线</div>
						<div class="p2">
						请自备小板凳，强势围观。
					</div>
						<div class="p3">在线测评</div>
					</div>
					<div class="swiper-slide q1">
						<img class="zhongjian" src="../images/our-features.png" alt=""> 
						<img class="a1" src="../images/clean.png" alt="">
						<img class="a2" src="../images/lu.png" alt="">
						<img class="b1" src="../images/responsive.png" alt="">
						<img class="b2" src="../images/lm.png" alt="">
						<img class="c1" src="../images/bootstrap.png" alt="">
						<img class="c2" src="../images/lb.png" alt="">

                      
                       <img class="d1" src="../images/solid.png" alt="">
                       <img class="d2" src="../images/ru.png" alt="">
                       <img class="e1" src="../images/lightweight.png" alt="">
                       <img class="e2" src="../images/rm.png" alt="">
                       <img class="f1" src="../images/fresh.png" alt="">
                       <img class="f2" src="../images/rb.png">

					</div>
					<div class="swiper-slide q2 q3">
						<img class="img2" src="../images/rb.png" >
						<img style="right: 18%;" class="img1" src="../images/guy.png" alt="">
						<img class="img3" src="../images/spotlight.png" >
						<img class="img1" style="display: none; right: 18%;" src="../images/guy-shadow.png" alt="">
						
						<div class="p" style="font-size: 30px;">
							职业教育在线测评与学习平台
						</div>
							<div class="p2" style="top: 32%;">
							我们一直致力于优秀的职业教育，
							<br>
							为你搭建成就梦想的舞台。
							<br>
						</div>
							<div class="p3">在线学习</div>
					</div>
				</div>
				<div class="swiper-pagination"></div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
		</div>
		<!-- 轮播图结束 -->
		
		<!-- 免费课程开始 -->
		<div class="mianfei">
			<div class="content">
					<img class="fl" src="../images/ico4.jpg" alt="">
				<div class="fr">
					<p class="w1">完全免费课程</p>
					<p class="w2">精心录制视频课程与讲解，全部课程完全免费。</p>
					<p class="w3"><a href="">免费学习</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 免费课程结束 -->
		
		<!-- 智能评估开始 -->
		<div class="mianfei " style="background: #FFFFFF;">
			<div class="content">
					<img style="float: right; margin-right:80px; width: 500px;" src="../images/ico5.jpg" alt="">
				<div class=" fr "  style="margin-right: 625px;">
					<p class="w1" style="color: #f88383;">智能评估题库</p>
					<p class="w2">智能能力评估，学员可以通过具体题目，匹配相
关知识点,文字解析与视频解析相结合。</p>
					<p class="w3"><a href="">点击测评</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 智能评估结束 -->
		
		<!-- 智能匹配开始 -->
		<div class="mianfei">
			<div class="content">
					<img style="width: 550px;" src="../images/ico6.jpg" alt="">
				<div class="fr">
					<p class="w1" style="color: #5aaae4;">智能匹配练习</p>
					<p class="w2">跟随视频课程同步练习，紧扣重点难
点，点点精通。</p>
					<p class="w3"><a href="">开始练习</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 智能匹配结束 -->
		
		<!-- 全天答疑开始 -->
		<div class="mianfei " style="background: #FFFFFF;">
			<div class="content">
					<img style="float: right; margin-right:80px; width: 300px;" src="../images/ico7.png" alt="">
				<div class=" fr "  style="margin-right: 625px;">
					<p class="w1" style="color: #f39313;">全天答疑解惑</p>
					<p class="w2">谋刻答疑社区，老师学员共同交流，我们的讲师更是倾囊相授，有问必答。</p>
					<p class="w3"><a href="">提问问题</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 全天答疑结束 -->
		
		<!-- 精品课程开始 -->
		<div class="jingpin">
			<div class="jingpin-content">
				<div class="jingpin-title">
					精品课程
				</div>
				
				<!-- 选项卡 -->
				<div class="tab">
					<div class="item">
						<div class="item-a active-a">IT技能</div>
						<div class="item-a">IT技能</div>
						<div class="item-a">IT技能</div>
						<div class="item-a">IT技能</div>
						<div class="cl"></div>
					</div>
					<div class="list">
						<ul>
							<li class="show-a">
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
							<li>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
								
							</li>
							<li>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
							<li>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<img src="../images/c1.jpg" alt="">
									
									<div class="y1 bbb-p" style="text-align: center;" >HTTP下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">1255555人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
						</ul>
						
						
					</div>

				</div>
				
				
				<!-- 更多课程 -->
				<div class="gengduokecheng">
					<div><a href="tiku.html">更多课程</a></div>
				</div>
			</div>
		</div>
		<!-- 精品课程结束 -->
		
		
		<!-- 底部开始 -->
		<div class="bottom">
			<div class="content">
				<div>
					<ul>
						<li> <span>关注微信</span><img src="../images/num.png" alt=""></li>
						<li> <span>关注微博</span><img src="../images/wb.png" alt=""></li>
						<div class="cl"></div>
					</ul>
				</div>
				<p>
					<a href="">关于我们</a>|
					<a href="">联系我们</a>|
					<a href="">优秀讲师</a>|
					<a href="">帮助中心</a>|
					<a href="">意见反馈</a>|
					<a href="">加入我们</a>
				</p>
				<p>17素材网 &nbsp;所有&nbsp;晋ICP备12006957号-9</p>
				<p>教学12班&nbsp;&nbsp;杨凌霄</p>
			</div>
		</div>
		<!-- 底部结束 -->
		
		<!-- 固定定位开始 -->
		<div class="gudingdingwei">
			<span class="span1"></span>
			<span class="span2"></span>
			<span class="span3"></span>
			<span class="span4"></span>
		</div>
		
		<!-- 固定定位结束 -->
		
		<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/index.js"></script>
	</body>
</html>
